<template>

  <div>
    <section class="el-container">
      <main class="el-main">
        <!-- 返回按钮 -->
        <el-row>
          <el-col :span="10">
            <div class="grid-content111">
              <el-button @click="goBack" icon="el-icon-arrow-left" type="text"
                style="font-size:24px; padding: 0px 530px 0px 10px;"></el-button>
            </div>
          </el-col>
        </el-row>

        <!-- 作品名称 -->
        <el-row style="display: flex; justify-content: center; align-items: center; margin-bottom: 50px;">
          <el-col :span="10">
            <div class="grid-content" style="display: flex; justify-content: center; align-items: center;">
              <h1 class="title2" style="margin:auto 0;">{{ product.productName }}</h1>
            </div>
          </el-col>
        </el-row>

        <!-- 系统界面截图和详细信息 -->
        <el-row>
          <el-col :span="12">
            <div class="grid-content">
              <!-- 系统界面截图 -->
              <div class="demo-image">
                <div class="block" v-for="fit in fits" :key="fit" style="width: 100%">
                  <span class="demonstration"></span>
                  <el-image style="width: auto;
                    height: auto;
                    max-width: 400px;" :src="product.pictureUrl" :fit="fit"></el-image>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content">
              <!-- 详细信息 -->
              <div class="detail-info5" style="height: auto;
              margin: 0 0 0 -450px;">
                <p class="some">作品种类: {{ product.productType }}</p>

                <p class="some">研发时间: {{ product.productTime }}</p>
                <p class="some">研发背景: {{ product.productBg }}</p>
              </div>
            </div>
          </el-col>
        </el-row>

        <!-- 视频展示 -->
        <el-row style="margin-top: 30px; width: 100%; margin: 30px 0 0 0;">
          <el-col :span="24">
            <div class="grid-content2" style="text-align: center;">
              <div id="vido" style="padding: 20px;">
                <video controls preload="auto" :src="product.videoUrl" class="video-player" style="display: flex;
                   max-height: 100%;
                    margin: 20px auto;
                    max-height: 700px;
                    min-width: 600px;
                    "></video>
              </div>
            </div>
          </el-col>
        </el-row>

        <!-- 系统功能介绍 -->
        <el-row>
          <el-col :span="24">
            <div class="grid-content3">
              <div class="detail-info3">
                <p>系统功能介绍:{{ product.productDetails }}</p>
              </div>
            </div>
          </el-col>
        </el-row>
      </main>
    </section>
  </div>
</template>


<script>
import axios from 'axios';
export default {
  props: ['productId'],
  // 返回上一页
  data() {
    return {
      product: {},
      // productId1: 'uuid-11223',
      productName: '',
      productType: '',
      productTime: '',
      productBg: '',
      productDetails: '',
      fits: ['fill'],
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      videoUrl: 'https://www.w3schools.com/html/movie.mp4',
    };
  },
  created() {
    this.fetchProductData();
    console.log(this.productId)
  },
  mounted() {
    this.fetchProductData();
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    fetchProductData() {
      console.log('开始发送请求')

      axios.post('http://121.43.55.236:8081/productCenter/findPrdById', {
        id: this.productId  // 将 id 作为请求体的一部分发送
      })
        .then(response => {
          console.log(response.data);
          this.product = response.data.data;
          // console.log(response.data.data);
        })
        .catch(error => {
          console.error('获取产品数据失败:', error);
        });
    }

  },

}


</script>


<style>
.all {
  width: auto;
  flex: 1 1 auto;
  min-height: 100%;

}

.grid-content111 {
  line-height: 70px;
}

.detail-info5 {
  line-height: 50px;
  width: 600px;
  float: right;

}

.detail-info3 {
  margin: 0px 0px 20px 100px;

}

.some {
  height: 50px;
  width: 400px;
}

.video-player {

  width: 70%;
  /* 视频宽度占满容器 */
  height: auto;
  /* 高度自动调整以保持视频宽高比 */
  max-height: 100%;
  /* 确保视频高度不会超出容器高度 */
  display: flex;


}

.demo-image {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;


}

.block {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 100%;
}

.title2 {
  width: auto;
  height: 50px;
  margin: 0 auto;
  font-size: 50px;
  font-weight: bold;

}

.el-row {
  margin-bottom: 0px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
